<template>
	<view style="height: 100vh; background-color: #F8F8F8;">
		<view class="dingpei">
			<view @click="changpao()">
				长跑路线

			</view>
			<view @click="huoyuan()">
				货源大厅
				<view/>
			</view>
			<view @click="zhuanshu()">
				专属货源
			</view>
		</view>
		<view class="ssuoz" v-if="ssuo && dj !=3">
			<input type="text" placeholder="请输入查询的地址" v-model="ssuoss" 
				style="height: 60rpx; padding-left: 30rpx;border-radius: 50rpx; border: 1px solid #8F8E8F;margin: 5rpx 10rpx;" >
				</input>
				<view class="ssann" @click="shousuo(ssuoss)">
					
				</view>
		</view>
    <!--货源大厅显示的数据-->
		<view class="waiwei" v-if="dj == 1">
			<view class="daohanglan">
				<view class="zhuang">装:</view>
				<view class="zhuang">卸:</view>
				<view class="pai">
					<view class="pai">
						<!-- 选中之后的数据展示 -->
						<view class="inputPlaceholder" v-if='value' @tap="changejiantou">
							<text style="color:black;">{{ value }}</text>
							<view class="jiantou1" v-if='isjiantou'><i class="iconfont icon-jiantou"></i></view>
							<view class="jiantou1" v-else><i class="iconfont icon-jiantou1"></i></view>
						</view>
						<!-- 未选择时的Placeholder展示 -->
						<view class="inputPlaceholder" v-else @tap="changejiantou">
							<text>请选择司机类别</text>
							<view class="jiantou1" v-if='isjiantou'><i class="iconfont icon-jiantou"></i></view>
							<view class="jiantou1" v-else><i class="iconfont icon-jiantou1"></i></view>
						</view>
						<!-- 下拉展开后的可选择内容 -->
						<view class="content" v-if='!isjiantou'>
							<view :class="item.id === valueid ? 'active' : ''" v-for="item in selectcontent"
								:key="item.id" @tap="changecontent" :data-datavalue="item">
								{{ item.name }}
							</view>
						</view>
					</view>
				</view>

				<view @click="suos()">
					<image src="@/photo/zhaohuo/搜索.png" style="width: 30rpx;height: 30rpx;"></image>
				</view>
			</view>
			<view class="xinxi" v-if="shuju" >
				<view class="xunh" v-for="time in shuju" @click="tzhuan(time)">
					<view class="yaodong">
						<view class="zuo">
							<image src="/photo/zhaohuo/diandian.png" mode=""
								style="width: 40rpx;height: 80rpx;margin-top: 17rpx;"></image>
						</view>
						<view class="you">
							<view style="font-size: 28rpx;height: 70rpx;">
								{{time.shippingaddress.stationName}} - {{time.shippingaddress.stationAddress}}
							</view>
							<view style="font-size: 28rpx;height: 70rpx;">
								{{time.unloadingaddress.stationName}} - {{time.unloadingaddress.stationAddress}}
							</view>
						</view>
					</view>
					<view class="yuan">
						<image src="@/photo/zhaohuo/naoz.png" style="width: 27rpx;height: 27rpx;" mode=""></image>
						原煤{{time.totalweight}} 剩余{{time.totalweights}}吨
					</view>
					<view class="yun">
						运价<span class="jia">{{time.unitprice}}元/吨</span>预估收入<span class="jia">{{time.yprice}}元</span>
					</view>
				</view>
			</view>
			<view class="meiyou">
				没有更多数据了
			</view>
		</view>

    <!--专属货源显示的页面-->
    <view class="waiwei" v-if="dj == 2">
      <view class="daohanglan">
        <view class="zhuang">装:</view>
        <view class="zhuang">卸:</view>
        <view class="pai">
          <view class="pai">
            <!-- 选中之后的数据展示 -->
            <view class="inputPlaceholder" v-if='value' @tap="changejiantou">
              <text style="color:black;">{{ value }}</text>
              <view class="jiantou1" v-if='isjiantou'><i class="iconfont icon-jiantou"></i></view>
              <view class="jiantou1" v-else><i class="iconfont icon-jiantou1"></i></view>
            </view>
            <!-- 未选择时的Placeholder展示 -->
            <view class="inputPlaceholder" v-else @tap="changejiantou">
              <text>请选择司机类别</text>
              <view class="jiantou1" v-if='isjiantou'><i class="iconfont icon-jiantou"></i></view>
              <view class="jiantou1" v-else><i class="iconfont icon-jiantou1"></i></view>
            </view>
            <!-- 下拉展开后的可选择内容 -->
            <view class="content" v-if='!isjiantou'>
              <view :class="item.id === valueid ? 'active' : ''" v-for="item in selectcontent"
                    :key="item.id" @tap="changecontent" :data-datavalue="item">
                {{ item.name }}
              </view>
            </view>
          </view>
        </view>

        <view @click="suos()">
          <image src="@/photo/zhaohuo/搜索.png" style="width: 30rpx;height: 30rpx;"></image>
        </view>
      </view>
      <view class="xinxi" v-if="shuju" >
        <view class="xunh" v-for="time in shuju" @click="tzhuan(time)">
          <view class="yaodong">
            <view class="zuo">
              <image src="/photo/zhaohuo/diandian.png" mode=""
                     style="width: 40rpx;height: 80rpx;margin-top: 17rpx;"></image>
            </view>
            <view class="you">
              <view style="font-size: 28rpx;height: 70rpx;">
                {{time.shippingaddress.stationName}} - {{time.shippingaddress.stationAddress}}
              </view>
              <view style="font-size: 28rpx;height: 70rpx;">
                {{time.unloadingaddress.stationName}} - {{time.unloadingaddress.stationAddress}}
              </view>
            </view>
          </view>
          <view class="yuan">
            <image src="@/photo/zhaohuo/naoz.png" style="width: 27rpx;height: 27rpx;" mode=""></image>
            原煤{{time.totalweight}} 剩余{{time.totalweights}}吨
          </view>
          <view class="yun">
            运价<span class="jia">{{time.unitprice}}元/吨</span>预估收入<span class="jia">{{time.yprice}}元</span>
          </view>
        </view>
      </view>
      <view class="meiyou">
        没有更多数据了
      </view>
    </view>

    <!--长跑路线的页面-->
    <view class="wai" v-else-if="dj == 3">
      <h2 class="cpao">常跑路线({{xx.length}}/10)</h2>
      <view class="xun" v-for="tt in xx">
        <view class="dd">{{tt.startposition}}</view>
        <view class="xiang"></view>
        <view class="dd1">{{tt.stopposition}}</view>
        <view style="margin: auto;" @click="shanchu(tt.id)">
          <image src="@/photo/zhaohuo/删除 (1).png" mode="" style="width: 40rpx;height: 40rpx;"></image>
        </view>
      </view>
      <view class="ze">
        <input class="dd" type="text" v-model="shifa" placeholder="填写始发地"
               style="text-align: center;height: 60rpx;font-size: 32rpx;" />
        <view class="xiang">

        </view>
        <input class="zuo" type="text" v-model="mudidi" placeholder="填写目的地"
               style="text-align: center;height: 60rpx;font-size: 32rpx;" />
      </view>
      <button class="tianjia" @click="tianjiaa()">添加</button>
    </view>
	</view>
</template>

<script setup>
	import {
		onMounted,
		ref
	} from 'vue';
	import {
		http
	} from '../../config/requst';
	
	import {
		shopStore
	} from '@/stores/shop.js';
  import {userStore} from "@/stores/user";
	const shuju = (ref([]))
	const ssuoss =ref('')
  //点击不同的状态栏，出现不同的页面
  const dj = ref(1)
	const tzhuan = (obj) => {
		shopStore().setShop(obj)
		uni.navigateTo({
			url: '/pages/deal/deal'
		})
	}
	//搜索
	const ssuo = ref(false)
	const suos = () => {
		if (ssuo.value) {
			ssuo.value = false
		} else {
			ssuo.value = true
		}
	}
	const changpao = () => {
    dj.value = 3
    let i = userStore().user.id
    lol(i)
		// uni.redirectTo({
		// 	url: '/pages/Frequently/Frequently'
		// })
	}
	const zhuanshu = () =>{
    dj.value = 2
    let i = userStore().user.id
    guazai2(i)
		// uni.redirectTo({
		// 	url: '/pages/admin/admin'
		// })
	}
  const lol = async (id) => {
    console.log(id)
    const cpaol = await http({
      url: "/freightsources/cangpao/" + id,
      method: 'GET'
    })
    console.log(cpaol)
    if (cpaol.code == 20041) {
      xx.value = cpaol.shuju
    }
  }

  const  huoyuan= () => {
    dj.value= 1
    guazai()
  }
  const guazai2 = async (id) => {
    console.log(11112121)
    const czhao = await http({
      url: "/freightsources/zhuanshu/"+id,
      method: 'GET',
    })
    console.log(czhao)
    if (czhao.code == 20041) {
      console.log(11111)
      shuju.value = czhao.shuju
      console.log(czhao.shuju)
      console.log(shuju.value)
    }
  }

	//下拉列表的js 
	const isjiantou = ref(true);
	const selectcontent = ref([{
			id: 1,
			name: "智能排序"
		},
		{
			id: 2,
			name: "离我最近"
		},
		{
			id: 3,
			name: "运价最高"
		},
		{
			id: 4,
			name: "运价最短"
		},
	]);
	const value = ref("智能排序");
	const valueid = ref(1);

	// 下拉框收起和下拉 
	const changejiantou = () => {
		isjiantou.value = !isjiantou.value;
	};

	const changecontent = (e) => {
		const datavalue = e.currentTarget.dataset.datavalue;
		value.value = datavalue.name;
		valueid.value = datavalue.id;
		isjiantou.value = true;
	};
	//连接后端读取数据
	const guazai = async () => {
		console.log(11112121)
		const czhao = await http({
			url: "/freightsources/guazai",
			method: 'POST',
		})
		console.log(czhao)
		if (czhao.code == 20041) {
			console.log(11111)
			shuju.value = czhao.shuju
			console.log(czhao.shuju)
			console.log(shuju.value)
		}
	}
	onMounted(() => {
    dj.value =1
		guazai()
	});
	const ssaas = async (name)=>{
		console.log(2121)
		const shousuo = await http({
			url:"/freightsources/sousuoaa/"+name,
			method:"Get"
		})
		console.log(shousuo)
		if(shousuo.code==20041){
			shuju.value = shousuo.shuju
			console.log(shuju)
		}
	}
	const shousuo =(aa)=>{
		console.log(aa)
		ssaas(aa)
	}
  const shanchu = (id) => {

    wx.showModal({
      title: '删除',
      content: '确定要删除吗？',
      success: function(sm) {
        if (sm.confirm) {
          // 用户点击了确定 可以调用删除方法了
          dele(id)
        } else if (sm.cancel) {
          console.log('用户点击取消')
        }
      }
    })

  }
  const dele = async (id) => {
    const del = await http({
      url: "/freightsources/del/" + id,
      method: 'GET'
    })
    lol(user.user.id)
    if (del.code == 20021) {
      wx.showToast({
        title: '删除成功',
        icon: 'success',
        duration: 2000 //持续的时间
      })
    } else {
      wx.showToast({
        title: '删除失败！请稍后重试',
        icon: 'none',
        duration: 2000 //持续的时间
      })
    }
    console.log(del)
  }
  const shifa = ref()
  const mudidi = ref()
  const xx = (ref([]))
  const tianjiaa = () => {
    console.log(111)

    if (shifa.value != null && mudidi.value != null) {
      console.log(shifa.value)
      console.log(mudidi.value)
      const cap = ({
        did: userStore().user.id,
        startposition: shifa.value,
        stopposition: mudidi.value
      })
      lola(cap)
    } else {
      console.log(777)
    }
  }

  const lola = async (cc) => {
    console.log(cc)
    const lolb = await http({
      url: '/freightsources/cpao',
      method: 'POST',
      data: cc
    })
    lol(userStore().user.id)
    shifa.value = ''
    mudidi.value = ''
    console.log(123)
    console.log(lolb)
    if (lolb.code == 20021) {
      console.log(1234)
      wx.showToast({
        title: lolb.msg,
        icon: 'success',
        duration: 2000 //持续的时间
      })
    } else if (lolb.code == 20020) {
      wx.showToast({
        title: lolb.msg,
        icon: 'none',
        duration: 2000 //持续的时间
      })
    }
  }
</script>

<style scoped>
	.dingpei {
		display: flex;
		justify-content: space-around;
		color: #002FAF;
	}

	.meiyou {
		margin-top: 20rpx;
		height: 70rpx;
		line-height: 70rpx;
		/* border: 1px solid #000; */
		text-align: center;
	}

	.daohanglan {
		padding-left: 30rpx;
		padding-right: 70rpx;
		height: 70rpx;
		line-height: 70rpx;
		/* border: 1px solid #000; */
		display: flex;
		justify-content: space-between;
	}

	.zhuang {
		width: 80rpx;
		background-image: url('/photo/zhaohuo/xiala.png');
		background-repeat: no-repeat;
		background-position: 38rpx 25rpx;
	}

	.pai {
		width: 160rpx;
		/* background-image: url('/photo/zhaohuo/xiala.png');
		background-repeat: no-repeat;
		background-position: 120rpx 25rpx; */
		position: relative;
	}

	.xunh {
		background-color: #FFFFFF;
		padding-left: 30rpx;
		margin-top: 50rpx;
	}

	.yaodong {
		display: flex;
		padding-top: 20rpx;
	}

	.zuo {
		/* border: 1px solid #000; */
		display: flex;
		justify-content: center;
	}

	.you {
		/* border: 1px solid #000; */
	}

	.yuan {
		color: #ABADAB;
		font-size: 28rpx;
	}

	.yun {
		/* border: 1px solid #000; */
		height: 90rpx;
		line-height: 90rpx;
		font-size: 28rpx;
	}

	.jia {
		color: #F60117;
		font-size: 42rpx;
	}

	/* 下拉列表的js */
	.inputPlaceholder {
		width: 160rpx;
		height: 70rpx;
		line-height: 70rpx;
		/* border: 1px solid #DEDEDE; */
		/* padding: 8rpx 40rpx 8rpx 20rpx; */
		margin-left: 16rpx;
		color: #CBCBCB;
		border-radius: 10rpx;
		position: relative;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		font-size: 32rpx;
		background-image: url('/photo/zhaohuo/xiala.png');
		background-repeat: no-repeat;
		background-position: 125rpx 23rpx;

	}

	.jiantou1 {
		position: absolute;
		right: 10rpx;
		top: 8rpx;
	}

	.content {
		/* border: 1px solid #000; */
		width: 160rpx;
		max-height: 400rpx;
		/* position: absolute; 
	 top: 120rpx; 
	 left: 389rpx; */
		background: #FFFFFF;
		background-color: #FFFFFF;
		box-shadow: 0px 0px 10px 1px rgba(209, 209, 209, 0.35);
		padding: 20rpx;
		overflow-x: hidden;
		overflow-y: scroll;
		z-index: 1000;
	}

	.content>view {
		padding: 10rpx 0;

	}

	.active {
		color: #56D88A;
	}
	.ssuoz{
		position: relative;
	}
	.ssann{
		/* border: 1px solid #000; */
		width: 40rpx;
		height: 40rpx;
		background-image: url('/photo/zhaohuo/搜索.png');
		background-repeat: no-repeat;
		background-size: 35rpx;
		position: absolute;
		top: 12rpx;
		right: 30rpx;
	}
  .wai {
    margin-top: 40rpx;
  }

  .cpao {
    /* border: 1px solid #000; */
    padding-left: 30rpx;
    height: 80rpx;
    line-height: 80rpx;
    font-size: 36rpx;
    font-weight: 900;
  }

  .xun {
    display: flex;
    font-size: 32rpx;
    font-weight: 549;
    border-bottom: 1px solid #F8F8F8;
  }

  .dd {
    /* border: 1px solid #000; */
    width: 300rpx;
    text-align: center;
    height: 60rpx;
    line-height: 60rpx;
  }

  .dd1 {
    /* border: 1px solid #000; */
    width: 300rpx;
    text-align: center;
    height: 60rpx;
    line-height: 60rpx;
  }

  .ze {
    display: flex;
  }

  .xiang {
    width: 90rpx;
    background-image: url('/photo/zhaohuo/右.png');
    background-repeat: no-repeat;
    background-position: 29rpx 16rpx;
  }

  .dingpei {
    display: flex;
    justify-content: space-around;
    color: #002FAF;
  }

  .tianjia {
    width: 500rpx;
    margin-top: 30rpx;
    color: #F8F8F8;
    background-color: #22B14C;
  }

  .custom-toast {
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    padding: 15px 20px;
    background-color: #333;
    color: #fff;
    border-radius: 4px;
    z-index: 9999;
  }

  .custom-toast.error {
    background-color: #e74c3c;
    /* 红色背景表示错误 */
  }
</style>